<template>
  <el-dialog :title="name" :visible.sync="dialogVisible" width="30%">
    <div :class="{ upload: true, disabled: !!uploadFiles.length }">
      <template v-if="!uploadData">
        <el-upload
          ref="upload"
          class="upload-demo"
          accept=".xls, .xlsx"
          :auto-upload="false"
          drag
          action=""
          :http-request="importExcel"
          :before-upload="beforeUpload"
          :file-list="fileList"
          :limit="1"
          :disabled="!!uploadFiles.length"
        >
          <i class="el-icon" />
          <div class="el-upload__text">将文件拖到此处，或点击上传</div>
          <div slot="tip" class="el-upload__tip">仅支持单个表单文件导入</div>
        </el-upload>
      </template>
      <div v-else class="success">
        <p class="title">
          导入成功<span style="color: #00c753">{{ uploadData.success }}</span>条，失败<span style="color: #ff4d4f">{{ uploadData.fail }}</span>条
        </p>
        <ul>
          <li v-for="(item,index) in uploadData.message" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        v-if="!uploadData"
        @click="dialogVisible = false"
      >取 消</el-button>
      <el-button
        :disabled="!uploadFiles.length"
        type="primary"
        @click="!uploadData ? $refs.upload.submit() : (dialogVisible = false)"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    request: {
      type: Function,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      uploadFiles: [],
      uploadData: null
    }
  },
  watch: {
    async dialogVisible(val) {
      if (val) {
        await this.$nextTick
        this.uploadFiles = this.$refs.upload.uploadFiles
      } else {
        this.uploadFiles = []
        this.uploadData = null
      }
    }
  },
  methods: {
    beforeUpload(file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!extension && !extension2) {
        this.$message.warning('上传文件只能是 xls、xlsx格式!')
      }
      if (!isLt2M) {
        this.$message.warning('上传文件大小不能超过 2MB!')
      }
      return (extension || extension2) && isLt2M
    },
    async importExcel(res) {
      const formData = new FormData()
      formData.append('file', res.file)
      const { data } = await this.request(formData)
      this.uploadData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.upload {
  padding: 12px 20px 20px;
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  text-align: center;
  color: #332929;
  line-height: 20px;
  ::v-deep .el-upload-dragger {
    background-color: transparent;
    border: 0 none;
    border-radius: 0;
    width: auto;
    height: auto;
    position: relative;
    overflow: auto;
    .el-icon {
      background: url(http://www-wms-java.itheima.net/img/upload.413192d4.png)
        no-repeat;
      background-size: contain;
      display: inline-block;
      width: 57px;
      height: 57px;
    }
  }
  &.disabled {
    ::v-deep .el-upload-dragger .el-icon {
      background: url(http://www-wms-java.itheima.net/img/uploadisabled.bcac587b.png)
        no-repeat;
      background-size: contain;
    }
  }
}
.success {
  height: 100px;
  p.title{
    margin: 0 0 10px;
  }
  ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    color: #b5abab;
  }
}
</style>
